<div class="container">
  <div class="row justify-content-md-center">
    <div class="col-8 align-self-center">
      <input type="text" name="todoText" class="form-control" [(ngModel)]="todoText" (keyup.enter)="onAddTodoText()" />
    </div>
    <div class="col-2">
      <button class="btn btn-sm btn-primary btn-block" (click)="onAddTodoText()">Add</button>

    </div>
    <div class="col-2">
    <button class="btn btn-sm btn-primary btn-block" (click)="onClearTodoText()">Clear</button>
    </div>
  </div>

  <hr>


  <div class="row">
    <div class="col">
      <div *ngIf="isTodoListEmpty">
        <p>没有代办事项</p>
      </div>
      <div class="list-group" *ngIf="!isTodoListEmpty">
        <a href="#" class="list-group-item list-group-item-action" *ngFor="let todo of todoList">
          <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1" [ngClass]="todo.isCompleted ? 'strike':''">{{todo.text}}</h5>
            <button class="btn btn-sm btn-primary" (click)="onCompletingTask(todo.todoId)">{{todo.buttonText}}</button>
          </div>
        </a>
      </div>
    </div>
  </div>
